<template>
  <div>
    <h1>App</h1>

    <Hello name="张三" age="18" @change="onChange" @abcd="onChange" />
    <hr />

    <BaseInput type="text" @focus="onFocus" @blur="onBlur" />
    <hr />
    <BaseInput type="password" />

    <hr />
    <MyButton id="box"></MyButton>

    <hr />
    <World @change="onChange" @click="onClick" />
  </div>
</template>

<script>
import Hello from './components/Hello.vue';
import World from './components/World.vue';
import BaseInput from './components/BaseInput.vue';
import MyButton from './components/MyButton.vue';

export default {
  components: {
    Hello,
    World,
    BaseInput,
    MyButton,
  },
  methods: {
    onClick(event) {
      console.log('onClick', event)
    },
    onChange() {
      console.log('onChange')
    },

    onFocus() {
      console.log('onFocus')
    },

    onBlur() {
      console.log('onBlur')
    }
  }
}
</script>